<template>
    <div class="h-full machine-terminal-tabs">
        <el-tabs v-if="state.tabs.size > 0" type="card" @tab-remove="onRemoveTab" v-model="state.activeTermName" class="!h-full w-full">
            <el-tab-pane class="!h-full flex flex-col" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                <template #label>
                    <el-popconfirm @confirm="handleReconnect(dt, true)" :title="$t('machine.reConnTips')">
                        <template #reference>
                            <el-icon
                                class="mr-1"
                                :color="EnumValue.getEnumByValue(TerminalStatusEnum, dt.status)?.extra?.iconColor"
                                :title="dt.status == TerminalStatusEnum.Connected.value ? '' : $t('machine.clickReConn')"
                                ><Connection />
                            </el-icon>
                        </template>
                    </el-popconfirm>
                    <el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
                        <template #reference>
                            <div>
                                <span class="machine-terminal-tab-label">{{ dt.label }}</span>
                            </div>
                        </template>
                        <template #default>
                            <el-descriptions :column="1" size="small">
                                <el-descriptions-item :label="$t('common.name')"> {{ dt.params?.name }} </el-descriptions-item>
                                <el-descriptions-item label="host"> {{ dt.params?.ip }} : {{ dt.params?.port }} </el-descriptions-item>
                                <el-descriptions-item label="username"> {{ dt.params?.selectAuthCert.username }} </el-descriptions-item>
                                <el-descriptions-item label="remark"> {{ dt.params?.remark }} </el-descriptions-item>
                            </el-descriptions>
                        </template>
                    </el-popover>
                </template>

                <div class="terminal-wrapper flex-1 h-[calc(100vh-155px)]">
                    <TerminalBody
                        v-if="dt.params.protocol == MachineProtocolEnum.Ssh.value"
                        :mount-init="false"
                        @status-change="terminalStatusChange(dt.key, $event)"
                        :ref="(el: any) => setTerminalRef(el, dt.key)"
                        :socket-url="dt.socketUrl"
                    />
                    <machine-rdp
                        v-if="dt.params.protocol != MachineProtocolEnum.Ssh.value"
                        :machine-id="dt.params.id"
                        :auth-cert="dt.authCert"
                        :ref="(el: any) => setTerminalRef(el, dt.key)"
                        @status-change="terminalStatusChange(dt.key, $event)"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog v-if="infoDialog.visible" v-model="infoDialog.visible">
            <el-descriptions :title="$t('common.detail')" :column="3" border>
                <el-descriptions-item :span="1.5" label="ID">{{ infoDialog.data.id }}</el-descriptions-item>
                <el-descriptions-item :span="1.5" :label="$t('common.name')">{{ infoDialog.data.name }}</el-descriptions-item>

                <el-descriptions-item :span="3" :label="$t('tag.relateTag')">
                    <ResourceTags :tags="infoDialog.data.tags" />
                </el-descriptions-item>

                <el-descriptions-item :span="2" label="IP">{{ infoDialog.data.ip }}</el-descriptions-item>
                <el-descriptions-item :span="1" :label="$t('machine.port')">{{ infoDialog.data.port }}</el-descriptions-item>

                <el-descriptions-item :span="3" :label="$t('common.remark')">{{ infoDialog.data.remark }}</el-descriptions-item>

                <el-descriptions-item :span="1.5" :label="$t('machine.sshTunnel')"
                    >{{ infoDialog.data.sshTunnelMachineId > 0 ? $t('common.yes') : $t('common.no') }}
                </el-descriptions-item>
                <el-descriptions-item :span="1.5" :label="$t('machine.terminalPlayback')"
                    >{{ infoDialog.data.enableRecorder == 1 ? $t('common.yes') : $t('common.no') }}
                </el-descriptions-item>

                <el-descriptions-item :span="2" :label="$t('common.createTime')">
                    {{ formatDate(infoDialog.data.createTime) }}
                </el-descriptions-item>
                <el-descriptions-item :span="1" :label="$t('common.creator')">
                    {{ infoDialog.data.creator }}
                </el-descriptions-item>

                <el-descriptions-item :span="2" :label="$t('common.updateTime')">
                    {{ formatDate(infoDialog.data.updateTime) }}
                </el-descriptions-item>
                <el-descriptions-item :span="1" :label="$t('common.modifier')">
                    {{ infoDialog.data.modifier }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />

        <script-manage
            :title="serviceDialog.title"
            v-model:visible="serviceDialog.visible"
            v-model:machineId="serviceDialog.machineId"
            :auth-cert-name="serviceDialog.authCertName"
        />

        <file-conf-list
            :title="fileDialog.title"
            :auth-cert-name="fileDialog.authCertName"
            v-model:visible="fileDialog.visible"
            v-model:machineId="fileDialog.machineId"
            :protocol="fileDialog.protocol"
        />

        <el-dialog destroy-on-close :title="state.filesystemDialog.title" v-model="state.filesystemDialog.visible" :close-on-click-modal="false" width="70%">
            <machine-file
                :machine-id="state.filesystemDialog.machineId"
                :auth-cert-name="state.filesystemDialog.authCertName"
                :protocol="state.filesystemDialog.protocol"
                :file-id="state.filesystemDialog.fileId"
                :path="state.filesystemDialog.path"
            />
        </el-dialog>

        <machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId" :title="machineStatsDialog.title" />

        <machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId" :title="machineRecDialog.title" />
    </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, getCurrentInstance, inject, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getMachineTerminalSocketUrl } from '../api';
import { formatDate } from '@/common/utils/format';
import { hasPerms } from '@/components/auth/auth';
import TerminalBody from '@/components/terminal/TerminalBody.vue';
import { TerminalStatus, TerminalStatusEnum } from '@/components/terminal/common';
import MachineRdp from '@/components/terminal-rdp/MachineRdp.vue';
import MachineFile from '@/views/ops/machine/file/MachineFile.vue';
import ResourceTags from '../../component/ResourceTags.vue';
import { MachineProtocolEnum } from '../enums';
import EnumValue from '@/common/Enum';
import { useI18n } from 'vue-i18n';
import { ResourceOpCtx } from '@/views/ops/component/tag';
import { ResourceOpCtxKey } from '@/views/ops/resource/resource';
import { MachineOpComp } from '@/views/ops/machine/resource';

// 组件
const ScriptManage = defineAsyncComponent(() => import('../ScriptManage.vue'));
const FileConfList = defineAsyncComponent(() => import('../file/FileConfList.vue'));
const MachineStats = defineAsyncComponent(() => import('../MachineStats.vue'));
const MachineRec = defineAsyncComponent(() => import('../MachineRec.vue'));
const ProcessList = defineAsyncComponent(() => import('../ProcessList.vue'));

const { t } = useI18n();

const router = useRouter();

const perms = {
    addMachine: 'machine:add',
    updateMachine: 'machine:update',
    delMachine: 'machine:del',
    terminal: 'machine:terminal',
    closeCli: 'machine:close-cli',
};

// 该用户拥有的的操作列按钮权限，使用v-if进行判断，v-auth对el-dropdown-item无效
const actionBtns = hasPerms([perms.updateMachine, perms.closeCli]);

const emits = defineEmits(['init']);

const resourceOpCtx: ResourceOpCtx | undefined = inject(ResourceOpCtxKey);

const state = reactive({
    defaultExpendKey: [] as any,
    params: {
        pageNum: 1,
        pageSize: 0,
        ip: null,
        name: null,
        tagPath: '',
    },
    infoDialog: {
        visible: false,
        data: null as any,
    },
    serviceDialog: {
        visible: false,
        machineId: 0,
        authCertName: '',
        title: '',
    },
    processDialog: {
        visible: false,
        machineId: 0,
    },
    fileDialog: {
        visible: false,
        machineId: 0,
        protocol: 1,
        title: '',
        authCertName: '',
    },
    filesystemDialog: {
        visible: false,
        machineId: 0,
        authCertName: '',
        protocol: 1,
        title: '',
        fileId: 0,
        path: '',
    },
    machineStatsDialog: {
        visible: false,
        stats: null,
        title: '',
        machineId: 0,
    },
    machineRecDialog: {
        visible: false,
        machineId: 0,
        title: '',
    },
    activeTermName: '',
    tabs: new Map<string, any>(),
});

const { infoDialog, serviceDialog, processDialog, fileDialog, machineStatsDialog, machineRecDialog } = toRefs(state);

let openIds: any = {};

watch(
    () => state.activeTermName,
    (newValue, oldValue) => {
        fitTerminal();

        oldValue && terminalRefs[oldValue]?.blur && terminalRefs[oldValue]?.blur();
        terminalRefs[newValue]?.focus && terminalRefs[newValue]?.focus();

        const nowTab = state.tabs.get(state.activeTermName);
        resourceOpCtx?.setCurrentTreeKey(nowTab?.authCert);
    }
);

onMounted(() => {
    emits('init', { name: MachineOpComp.name, ref: getCurrentInstance()?.exposed });
});

const openTerminal = (machine: any, ex?: boolean) => {
    // 授权凭证名
    const ac = machine.selectAuthCert.name;

    // 新窗口打开
    if (ex) {
        if (machine.protocol == MachineProtocolEnum.Ssh.value) {
            const { href } = router.resolve({
                path: `/machine/terminal`,
                query: {
                    ac,
                    name: machine.name,
                },
            });
            window.open(href, '_blank');
            return;
        }
        if (machine.protocol == MachineProtocolEnum.Rdp.value) {
            const { href } = router.resolve({
                path: `/machine/terminal-rdp`,
                query: {
                    machineId: machine.id,
                    ac: ac,
                    name: machine.name,
                },
            });
            window.open(href, '_blank');
            return;
        }
    }

    let { name } = machine;
    const labelName = `${machine.selectAuthCert.username}@${name}`;

    // 同一个机器的终端打开多次，key后添加下划线和数字区分
    openIds[ac] = openIds[ac] ? ++openIds[ac] : 1;
    let sameIndex = openIds[ac];

    let key = `${ac}_${sameIndex}`;
    // 只保留name的15个字，超出部分只保留前后10个字符，中间用省略号代替
    const label = labelName.length > 15 ? labelName.slice(0, 10) + '...' + labelName.slice(-10) : labelName;

    let tab = {
        key,
        label: `${label}${sameIndex === 1 ? '' : ':' + sameIndex}`, // label组成为:总打开term次数+name+同一个机器打开的次数
        params: machine,
        authCert: ac,
        socketUrl: getMachineTerminalSocketUrl(ac),
    };

    state.tabs.set(key, tab);

    nextTick(() => {
        handleReconnect(tab);
        state.activeTermName = key;
        setTimeout(() => fitTerminal(), 300);
    });
};

const serviceManager = (row: any) => {
    const authCert = row.selectAuthCert;
    state.serviceDialog.machineId = row.id;
    state.serviceDialog.visible = true;
    state.serviceDialog.authCertName = authCert.name;
    state.serviceDialog.title = `${row.name} => ${authCert.username}@${row.ip}`;
};

/**
 * 显示机器状态统计信息
 */
const showMachineStats = (machine: any) => {
    state.machineStatsDialog.machineId = machine.id;
    state.machineStatsDialog.title = `${t('machine.machineState')}: ${machine.name} => ${machine.ip}`;
    state.machineStatsDialog.visible = true;
};

const showFileManage = (selectionData: any) => {
    const authCert = selectionData.selectAuthCert;
    if (selectionData.protocol == 1) {
        state.fileDialog.visible = true;
        state.fileDialog.protocol = selectionData.protocol;
        state.fileDialog.machineId = selectionData.id;
        state.fileDialog.authCertName = authCert.name;
        state.fileDialog.title = `${selectionData.name} => ${authCert.username}@${selectionData.ip}`;
    }

    if (selectionData.protocol == 2) {
        state.filesystemDialog.protocol = 2;
        state.filesystemDialog.machineId = selectionData.id;
        state.filesystemDialog.authCertName = authCert.name;
        state.filesystemDialog.fileId = selectionData.id;
        state.filesystemDialog.path = '/';
        state.filesystemDialog.title = t('machine.remoteFileDesktopManage');
        state.filesystemDialog.visible = true;
    }
};

const showInfo = (info: any) => {
    state.infoDialog.data = info;
    state.infoDialog.visible = true;
};

const showProcess = (row: any) => {
    state.processDialog.machineId = row.id;
    state.processDialog.visible = true;
};

const showRec = (row: any) => {
    state.machineRecDialog.title = `${row.name}[${row.ip}]-${t('machine.terminalPlayback')}`;
    state.machineRecDialog.machineId = row.id;
    state.machineRecDialog.visible = true;
};

const onRemoveTab = (targetName: string) => {
    let activeTermName = state.activeTermName;
    const tabNames = [...state.tabs.keys()];
    for (let i = 0; i < tabNames.length; i++) {
        const tabName = tabNames[i];
        if (tabName !== targetName) {
            continue;
        }

        state.tabs.delete(targetName);
        let info = state.tabs.get(targetName);
        if (info) {
            terminalRefs[info.key]?.close();
        }

        if (activeTermName != targetName) {
            break;
        }

        // 如果删除的tab是当前激活的tab，则切换到前一个或后一个tab
        const nextTab = tabNames[i + 1] || tabNames[i - 1];
        if (nextTab) {
            activeTermName = nextTab;
        } else {
            activeTermName = '';
        }

        state.activeTermName = activeTermName;
        break;
    }
};

const terminalStatusChange = (key: string, status: TerminalStatus) => {
    state.tabs.get(key).status = status;
};

const terminalRefs: any = {};
const setTerminalRef = (el: any, key: any) => {
    if (key) {
        terminalRefs[key] = el;
    }
};

const fitTerminal = () => {
    setTimeout(() => {
        let info = state.tabs.get(state.activeTermName);
        if (info) {
            terminalRefs[info.key]?.fitTerminal && terminalRefs[info.key]?.fitTerminal();
        }
    });
};

const handleReconnect = (tab: any, force = false) => {
    terminalRefs[tab.key]?.init();
};

defineExpose({
    openTerminal,
    onResize: fitTerminal,
    showInfo,
    showProcess,
    showRec,
    showMachineStats,
    showFileManage,
    serviceManager,
});
</script>

<style lang="scss">
.machine-terminal-tabs {
    --el-tabs-header-height: 30px;

    .el-tabs {
        --el-tabs-header-height: 30px;
    }

    .machine-terminal-tab-label {
        font-size: 12px;
    }
    .el-tabs__header {
        margin-bottom: 5px;
    }
    .el-tabs__item {
        padding: 0 8px !important;
    }
}
</style>
